<template>
  <!-- 调用（配合面包屑管理新增）  -->
  <div class="container">
    <Header :showRefresh="false" @refresh="() => {}">
      <template #leftTitle>
        <router-link :to="{ name: 'ServiceAudit' }">审核列表</router-link>
        <el-icon class="v-align-top"> <arrow-right-bold /> </el-icon>
      </template>
    </Header>
    <div class="page-main">
      <FilterBar
        :showBack="false"
        @route="router.push({ name: 'ServiceList' })"
      >
        <template #left> </template>
      </FilterBar>
      <section class="form-box">
        <div class="verstion-box">
          <span class="lable">选择版本</span>
          <el-select
            v-model="versionId"
            placeholder="请选择"
            @change="changeVersion"
          >
            <el-option
              :label="item.versionNum"
              :value="item.versionId"
              v-for="(item, index) in versionList"
              :key="index"
            ></el-option>
          </el-select>
        </div>
        <h4 class="divider">调用参数</h4>
        <div class="request-table">
          <table class="pure-table">
            <thead>
              <tr>
                <th>参数名称</th>
                <th>中文名称</th>
                <th>类型</th>
                <th>测试值</th>
              </tr>
            </thead>
            <tbody>
              <tr v-for="(item, index) in requestData" :key="index">
                <td>
                  {{ item.paramName }}
                </td>
                <td>
                  {{ item.paramNameCn }}
                </td>
                <td>
                  {{ item.type }}
                </td>
                <td>
                  <el-input
                    v-model="item.defaultValue"
                    placeholder="请输入"
                  ></el-input>
                </td>
              </tr>
            </tbody>
          </table>
        </div>
        <div class="invocation-box">
          <div class="action-line">
            <el-button
              type="primary"
              style="float: right"
              @click="callVersionFun"
              :loading="callLoading"
              >调用</el-button
            >
          </div>
          <h5>处理后结果</h5>
          <div class="code-box json-format">
            <!-- <pre v-html="syntaxHighlight(resData.data1)"></pre> -->
          </div>
          <h5>原始结果</h5>
          <div class="code-box json-format">
            <pre v-html="syntaxHighlight(resData)"></pre>
          </div>
        </div>
      </section>
    </div>
  </div>
</template>

<script setup>
import { ArrowRightBold } from "@element-plus/icons-vue";
import { reactive, ref, onMounted, defineComponent, toRefs } from "vue";
import { useRoute, useRouter } from "vue-router";
import RequestTable from "./components/RequestTable.vue";
import Header from "@/components/Header.vue";
import {
  callVersionObj,
  detailService,
  versionService,
} from "@/api/service.js";
import { ElMessageBox, ElMessage } from "element-plus";
import { syntaxHighlight, html2Escape } from "@/utils/index.js";
import FilterBar from "@/components/FilterBar.vue";
const route = useRoute();
const router = useRouter();
const state = reactive({
  versionList: [],
  versionId: "",
  callLoading: false,
  requestData: [],
  resData: {},
});

const { versionList, versionId, callLoading, requestData, resData } =
  toRefs(state);

const getDetailInfo = async (id, vId) => {
  let res;
  if (id) {
    res = await detailService(id);
  } else {
    res = await versionService(vId);
  }
  let data = res.data;
  state.requestData = data.inParamsList || [];
  state.versionList = data.svc.versionList || [];
  state.versionId = data.versionId;
  // console.log(res);
};
// 切换版本
const changeVersion = async (id) => {
  let { data } = await versionService(id);
  state.requestData = data.inParamsList || [];
  state.versionList = data.svc.versionList || [];
};

const callVersionFun = async () => {
  state.callLoading = true;
  let paramas = {};
  state.requestData.map((it) => {
    if (it.defaultValue) {
      paramas[it.paramName] = it.defaultValue;
    }
  });
  console.log("paramas", paramas);
  try {
    let res = await callVersionObj(state.versionId, paramas);
    state.resData = html2Escape(res);
    state.callLoading = false;
  } catch (e) {
    state.callLoading = false;
  }
};
onMounted(() => {
  let id = route.query.id;
  let vId = route.query.versionId;
  getDetailInfo(id, vId);
});
</script>
<style lang="scss" scoped>
.invocation-box {
  padding: 10px 0;
  .action-line {
    overflow: hidden;
  }
  h5 {
    font-weight: bold;
    padding: 10px 0 5px 0;
    color: #666;
  }
}
.verstion-box {
  .lable {
    padding-right: 20px;
  }
}
</style>
